import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { createForm } from 'rc-form'
import { Icon,InputItem, NoticeBar,Button, Switch } from 'antd-mobile'
import { FooterBar } from 'component/footer'
import { CommonHeader } from 'component/header'
import { hashHistory } from 'react-router'
import { helper, config, myFetch } from '../utils'
import { PositionDetailTop,  } from './'
import { LimitOrStop } from '../trade'
import Reflux from 'reflux'
import { PriceAction } from '../../actions'
import { PriceStore } from '../../stores'


class PositionDetails extends Reflux.Component {
  constructor(props) {
    super(props)
    this.store = PriceStore
    this.storeKeys = ['sellPrice', 'buyPrice']
  }
  state = {
    data: {},
    direction: 0,
    pric: 0,
    pric1: 0
  }
  onOrderPrice = (data) => {
    console.log(data, 1)
    let orderPrice 
    if (data == 0) {
      orderPrice = this.state.sellPrice
    } else if (data == 1 ) {
      orderPrice = this.state.buyPrice
    }
    return orderPrice
  }
  onTimesChange = (e) => {
    if (e === 'undefined') {
      return
    }
    this.setState({
      pric: e
    })
  }
  onTimesChange1 = (e) => {
    if (e === 'undefined') {
      return
    }
    this.setState({
      pric1: e
    })
  }
  onValidity = (e) => {
    this.setState({
      validity: helper.requestTime(e)
    })
  }
  onOffsetChange = (e) => {
    this.setState({
      offsetNum: e
    })
  }
  onPositionDetails = (orderno) => {
    const options = {
      method: 'POST',
      body: JSON.stringify({
        ORDN: orderno
      })
    }
    myFetch(`${config.rootApi}/mPosition`, options, true)
     .then((rs) => {
      console.log(rs, 'rs')
        if (rs && rs.statusCode == 0) {
          this.setState({
            data: rs
          })
        }
        //console.log(rs)
     })
  }
  onPositionOco = () => {
    const data = this.state.data
    let direction
      if (data.bsCls == 0) {
        direction = 1
      } else if (data.bsCls == 1) {
        direction = 0
      }
    const options = {
      method: 'POST',
      body: JSON.stringify({
        PAIR: data.ccyPair,
        BSKB: direction,
        AMNT: data.positionAmt,
        YKKB: 4,
        YKDT: data.execDt,
        PRI1: this.state.pric ? this.state.pric : this.onOrderPrice(data.bsCls),
        PRI2: this.state.pric1 ? this.state.pric1 : this.onOrderPrice(data.bsCls),
        SKJ2: 4,
        KORD: data.orderNo,
        OFLG: 1
      })
    }
    myFetch(`${config.rootApi}/mCloseoco`, options, true)
      .then((rs) => {
        console.log(rs)
      })
  }
  componentDidMount() {
    const orderNo = this.props.location.query.orderno
    const ccyPair = this.props.location.query.ccyPair
    const amn = this.props.location.query.amn
    this.onPositionDetails(orderNo)  
    PriceAction.changePrice(ccyPair, amn)
  }
  componentWillUnmount() {
    PriceAction.clearTimeout()
  }
  render() {
    console.log(this.state.buyPrice)
    const { getFieldProps } = this.props.form
    const { direction, data } = this.state
    return (
      <div className="rt-orderpage">
       <CommonHeader title="持仓详情"/>
        <PositionDetailTop
          data={this.state.data}
        />
        <div className="-background rt-height22"></div>
        <div className="cm-scrollable-container rt-padding-24">
          <LimitOrStop
            className="rt-margin30"
            defaultCon={3}
            orderPrice={this.onOrderPrice(this.props.location.query.direction)}
            onTimesChange={this.onTimesChange}
            direction={data.bsCls}
            ccy={data.ccyPair || 'EUR/USD'}
          />
          <LimitOrStop
            defaultCon={4}
            orderPrice={this.onOrderPrice(this.props.location.query.direction)}
            onTimesChange={this.onTimesChange1}
            direction={data.bsCls}
            ccy={data.ccyPair || 'EUR/USD'}
          />
          <Button className="btn rt-sure" type="primary"
            onClick={
              () => {
                this.onPositionOco()
              }
            }
          >
            <FormattedMessage
              id='confirm'
             /> 
          </Button>
        </div>
        
        <FooterBar activeIndex={1}/>
      </div>
    )
  }
}

export default createForm()(PositionDetails)